<template>
  <el-card>
    <el-row v-if="isAdmin" :gutter="20" class="header">
      <el-col :span="7">
        <el-input v-model="queryForm.name" placeholder="请输入班级名称..." clearable />
      </el-col>
      <el-button type="primary" @click="initClassList">搜索</el-button>
    </el-row>

    <el-table :data="tableData" stripe style="width: 100%;text-align: center">
      <el-table-column prop="id" label="ID" width="80" />

      <el-table-column prop="name" label="班级名称" />
      <el-table-column prop="classKey" label="班级邀请码" />
      <el-table-column prop="peopleNum" label="学生人数" width="200" />
      <el-table-column prop="teacherName" label="创建人" width="200" />
      <el-table-column prop="userId" label="创建人ID" width="200" />
      <el-table-column prop="createTime" label="创建日期" width="200" />
      <el-table-column v-if="isAdmin || isTeacher" label="操作" width="200">
        <template v-slot="scope">
          <el-button type="primary" size="small" icon="el-icon-edit-outline" @click="viewStudents(scope.row)">查看学生</el-button>
          <el-button v-if="isAdmin || (isTeacher && scope.row.userId === currentUser.id)" 
                     type="danger" size="small" icon="el-icon-delete" 
                     @click="deleted(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :current-page="queryForm.pageNum"
      :page-sizes="[10, 20, 30, 40,50]"
      :page-size="queryForm.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <el-dialog
      title="学生信息"
      :visible.sync="centerDialogVisible"
      width="40%"
      center
    >
      <span>
        <el-table :data="gridData">
          <el-table-column property="name" label="姓名" width="150" />
          <el-table-column property="studentId" label="学号" width="200" />
          <el-table-column property="createTime" label="注册日期" width="200" />
        </el-table>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

  </el-card>
</template>

<script>
import { getClassList, getClassInfo, deleteSysClass, getStudentJoinClass } from '@/api/table'
export default {
  data() {
    return {
      queryForm: {
        pageSize: 10,
        pageNum: 1,
        name: ''
      },
      userInfo: {},
      tableData: [],
      gridData: [],
      total: 0,
      centerDialogVisible: false
    }
  },
  created() {
    // 页面刷新后，自动恢复用户信息到 vuex
    const userInfo = JSON.parse(localStorage.getItem('userInfo'))
    this.initClassList()
  },
  // 假设 identity: 1=管理员, 2=老师, 0=学生
  computed: {
    isTeacher() {
      const userInfo = JSON.parse(localStorage.getItem('userInfo'))
      return userInfo.identity == 1
    },
    isStudent() {
      const userInfo = JSON.parse(localStorage.getItem('userInfo'))
      return userInfo.identity == 0
    },
    isAdmin() {
      const userInfo = JSON.parse(localStorage.getItem('userInfo'))
      return userInfo.studentId === 'admin' && userInfo.identity === '1'
    },
    currentUser() {
      console.log(this.$store.getters.user,'this.$store.getters.user');
      return this.$store.getters.user || {}
    },
  },
  methods: {
    initClassList() {
      const userInfo = JSON.parse(localStorage.getItem('userInfo'))
      console.log(userInfo,'userInfo');
      if (this.isAdmin) {
      // 管理员查所有班级
        console.log(this.isAdmin,'isAdmin');
        getClassList(this.queryForm).then(res => {
          if (res.code == 200) {
            this.tableData = res.data.records
            this.total = res.data.total
          }
        })
      } else if (this.isTeacher) {
        // 老师查自己创建的班级
        console.log(this.isTeacher,'isTeacher');
        const sysClassList = localStorage.getItem('sysClassList')
        if (sysClassList) {
          const sysClassListArr = JSON.parse(sysClassList)
          this.tableData = sysClassListArr.filter(item => item.userId === userInfo.id)
          this.total = this.tableData.length
        }
        // getClassInfo({ userId: userInfo.studentId }).then(res => {
        //   if (res.code == 200) {
        //     this.tableData = res.data // 这里返回的是班级及学生信息
        //   }
        // })
      } else if (this.isStudent) {
        // 学生查自己加入的班级
        const sysClassList = localStorage.getItem('sysClassList')
        console.log(sysClassList,'sysClassList');
        
        const userInfo = JSON.parse(localStorage.getItem('userInfo'))
        console.log(userInfo,'userInfo');
        getStudentJoinClass({userId: userInfo.id}).then(res => {
          if (res.code == 200) {
            this.tableData = res.data
          }
        })

        // // 查看班级学生
        // getClassInfo({ classId: classItem.id }).then(res => {
        //   if (res.code == 200) {
        //     this.gridData = res.data
        //     this.centerDialogVisible = true
        //   }
        // })
      }
    },
    // 查看班级学生
    viewStudents(classItem) {
      getClassInfo({ classId: classItem.id }).then(res => {
        if (res.code == 200) {
          this.gridData = res.data
          this.centerDialogVisible = true
        }
      })
    },
    handleSizeChange(e) {
      console.log(e)
      this.queryForm.pageSize = e
      this.initUserList()
    },
    handleCurrentChange(e) {
      this.queryForm.pageNum = e
      this.initUserList()
    },
    update(item) {
      console.log(item)
      this.centerDialogVisible = true
      getClassInfo({ classId: item.id }).then(res => {
        console.log(res)
        if (res.code == 200) {
          this.gridData = res.data
        }
      })
    },
    deleted(item) {
      console.log(item)
      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteSysClass({ id: item.id }).then(res => {
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.initUserList()
          }
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
